<template>
  <div class="cart">
    <van-nav-bar
      title="标题"
      left-text="上一页"
      right-text="我的"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-swipe-cell v-for="item in goods" :key="item.id">
      <van-card
        :price="item.product.price.toFixed(2)"
        :desc="item.product.desc"
        :title="item.product.name"
        :thumb="item.product.coverImage | imgUrl"
      >
        <template #tag>
          <van-checkbox v-model="item.checked"></van-checkbox>
        </template>
        <template #footer>
          <van-stepper
            v-model="item.amount"
            theme="round"
            button-size="22"
            disable-input
            @plus="plus(item.product.id)"
            @minus="minus(item.product.id)"
          />
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delHandel(item.id)"
        />
      </template>
    </van-swipe-cell>
    <!-- 这里的price是按照分算的，算好之后要乘100 -->
    <van-submit-bar
      class="price"
      :price="sumPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox @click="!checked" v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { Toast } from "vant";
import { loadCart, addCart, delCart } from "../services/cart.js";
export default {
  // 计算属性
  computed: {
    checked: {
      // 手动设置全选按钮时
      set(v) {
        this.goods.forEach((item) => (item.checked = v));
      },
      // 全选按钮被动触发时
      get() {
        return this.goods.every((item) => item.checked);
      },
    },
    sumPrice() {
      return this.goods
        .filter((item) => item.checked)
        .reduce((pre, cur) => pre + cur.amount * cur.product.price * 100, 0);
    },
  },
  data() {
    return {
      goods: [],
    };
  },
  created() {
    // 加载购物车信息  给每一项都加上是否选中属性，默认选中
    loadCart().then(
      (res) =>
        (this.goods = res.data.map((item) => {
          return {
            ...item,
            checked: true,
          };
        }))
    );
  },
  methods: {
    // 跳转商品详情
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
    // 增加数量
    plus(id) {
      addCart(id, 1).then(() => this.$eventBus.$emit("updataCartCount"));
    },
    // 减少
    minus(id) {
      addCart(id, -1).then(() => this.$eventBus.$emit("updataCartCount"));
    },
    // 删除购物车商品
    delHandel(id) {
      delCart(id).then((res) => {
        if (res.code === 1) {
          // 事件总线 删除成功后重新派发更新购物车数量事件
          this.$eventBus.$emit("updataCartCount");
          loadCart().then(
            (res) =>
              (this.goods = res.data.map((item) => {
                return {
                  ...item,
                  checked: true,
                };
              }))
          );
          Toast(res.msg);
        } else {
          Toast(res.msg);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "User",
      });
    },
    onSubmit() {
      this.$router.push({
        name: "submitPost",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.price {
}
</style>